<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 13.06.11
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf8"
         pageEncoding="utf8" %>

<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link rel="stylesheet" href="style.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Проверка форм на jQuery</title>
    <style type="text/css">

        div.tabs {
            background: #990000;
            padding: 1em;
        }

        div.container {
            margin: auto;
            width: 90%;
            margin-bottom: 10px;
        }

        ul.tabNavigation {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul.tabNavigation li {
            display: inline;
        }

        ul.tabNavigation li a {
            padding: 3px 9px;
            background-color: #ccd2cf;
            color: #000;
            text-decoration: none;
        }

        ul.tabNavigation li a.selected,
        ul.tabNavigation li a.selected:hover {
            background: #FFF;
            color: #000;
        }

        ul.tabNavigation li a:hover {
            background: #ccc;
            color: #000;
        }

        ul.tabNavigation li a:focus {
            outline: 0;
        }

        div.tabs div {
            padding: 5px;
            margin-top: 3px;
            border: 1px solid #FFF;
            background: #FFF;
        }

        div.tabs div h2 {
            margin-top: 0;
        }
    </style>


      <script type="text/javascript" src="<c:out value="${root}"/>/js/jquery.js"></script>
    <script type="text/javascript" src="<c:out value="${root}"/>/js/jquery.validation_form.js"></script>
    <script type="text/javascript" src="<c:out value="${root}"/>/js/valid.js"></script>


    <script type="text/javascript">
        $(function () {
            var tabContainers = $('div.tabs > div'); // получаем массив контейнеров
            tabContainers.hide().filter(':first').show(); // прячем все, кроме первого
            // далее обрабатывается клик по вкладке
            $('div.tabs ul.tabNavigation a').click(
                    function () {
                        tabContainers.hide(); // прячем все табы
                        tabContainers.filter(this.hash).show(); // показываем содержимое текущего
                        $('div.tabs ul.tabNavigation a').removeClass('selected'); // у всех убираем класс 'selected'
                        $(this).addClass('selected'); // текушей вкладке добавляем класс 'selected'
                        return false;
                    }).filter(':first').click();
        });
    </script>
    <link type="text/css" href="<c:out value="${root}"/>/js/file/jquery.custom-input-file.css" rel="stylesheet"/>
</head>
<body background="<c:out value="${root}"/>/img/bg.png" style="background-repeat:repeat; margin-top:0 ;">

<table align="center" border="0" cellspacing="0">

    <%@include file="/WEB-INF/inc/header.jsp" %>


    <tr bgcolor="#ffffff">
        <td>


            <h1>Измененние данных профиля</h1>

            <div class="tabs">
                <!-- Это сами вкладки -->
                <ul class="tabNavigation">
                    <li><a class="" href="#first">Изменить изображение</a></li>
                    <li><a class="" href="#second">Фио, группа</a></li>
                    <li><a class="" href="#third">Пароль</a></li>
                </ul>
                <!-- Это контейнеры содержимого -->
                <div id="first">
                    <table align="center">
                        Выберите новый аватар формата jpg.
                        <form method="POST"

                              action="setpic"
                              enctype="multipart/form-data"

                                >


                            <img src="<c:out value="${root}"/>/userimg/<c:out value="${info.imgurl}"/>" alt="">


                            <p><input type="file" name="imgurl"></p>


                            <input type="submit" value="Отправить">

                        </form>

                    </table>

                </div>
                <div id="second">
                    <form method="POST" name="validation_form"
                          action="setfio"

                          commandName="person"
                            >
                        <table border="0" align="center">


                            <tr>
                                <td align="right">Фамилия</td>
                            </tr>
                            <tr>

                                <td><input class="text important" type="text" name="fname"
                                           value="<c:out value="${info.fname}"/>"/></td>
                            </tr>
                            <tr>
                                <td align="right">Имя</td>
                            </tr>
                            <tr>

                                <td><input class="text important" type="text" name="sname"
                                           value="<c:out value="${info.sname}"/>"/></td>
                            </tr>
                            <tr>
                                <td align="right">Отчество</td>
                            </tr>
                            <tr>

                                <td><input class="text important" type="text" name="tname"
                                           value="<c:out value="${info.tname}"/>"/></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <select name="grpid">
                                        <c:forEach items="${group}" var="gr">

                                            <option value="<c:out value="${gr[0]}"/>"><c:out value="${gr[1]}"/></option>

                                        </c:forEach>

                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td><input class="submit" type="submit" value="Добавить"/></td>
                            </tr>
                        </table>

                    </form>
                </div>
                <div id="third">
                    <form method="POST"     class="validation_form"
                          action="setall"

                         enctype="text/form-data"
                            >
                        <table align="center">
                              <tr>
                                <td align="right">Старый пароль</td>
                            </tr>
                            <tr>

                                <td><input class="text important" type="text" name="spas"/></td>
                            </tr>
                            <tr>
                                <td align="right">Новый пароль(От 5 символов)</td>
                            </tr>
                            <tr>

                                <td><input class="text password1 important" type="password" name="password"/></td>
                            </tr>
                            <tr>
                                <td align="right">Подтвердите пароль</td>
                            </tr>
                            <tr>

                                <td><input class="text password2 important" type="password" name="password2"/></td>
                            </tr>
                              <tr>
                                <td><input class="submit" type="submit" value="Добавить"/></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>


    <tr>
        <td colspan="2">
            <%@include file="/WEB-INF/inc/footer.jsp" %>
        </td>
    </tr>

</table>


</body>
</html>